<template>
  <div>
    <el-row>
      <el-col :span="24">
        <span style="font-size:28px;fon"><b>请帅哥美女们把你的脸放摄像头面前:</b></span>
      </el-col>
    </el-row>
    <el-row >
      <el-col :span="10" :offset="1" style="margin-top:50px;">
        <video ref="video" width="100%" height="300" autoplay ></video>
      </el-col>
      <el-col :span="10">
        <canvas ref="canvas" width="530" height="300" style="margin-top:50px;"></canvas>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="register" style="margin-left:600px;margin-top:150px">立即注册<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-col>
    </el-row>
  </div>
</template>  
    
  <script>
export default {
  name: "Registration",
  mounted() {
    this.setupCamera();
  },
  methods: {
    setupCamera() {
      const constraints = {
        state:true,
        audio: false,
        video: {
          width: 1980,
          height: 1024
        }
      };

      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(stream => {
          this.$refs.video.srcObject = stream;
          this.$refs.video.onloadedmetadata = () => {
            this.$refs.video.play();
          };
        })
        .catch(error => console.error("Error accessing media devices.", error));
    },
    register() {
      const context = this.$refs.canvas.getContext("2d");
      context.drawImage(this.$refs.video, 0, 0, 530, 300);
      const base64 = this.getBase64();
      let params={
        base:base64,
      }

      // 假设你有一个axios实例或其他HTTP客户端来处理请求
      // 这里使用axios作为示例
      this.$axios
        .post("api/uums-server/faceReg",params)
        .then(response => {
          if (response.data) {
            alert("注册成功");
            this.video = false;
            this.state=false;
          }
        })
        .catch(error => console.error("Error registering face.", error));
    },
    getBase64() {
      return this.$refs.canvas.toDataURL("image/png").split("base64,")[1];
    }
  }
};
</script>  
    
<style scoped>
</style>